<template>
	<view class="">
		<view class="acea-row row-between goods-list">
			<view class="item" @click="toDetail(item.id)" v-for="(item,index) in list" :key="index">
				<view class="img">
					<image :src="item.image?item.image.split(',')[0]:''" mode="" v-if="item.image"></image>
						<image :src="item.shopfrontPhoto?item.shopfrontPhoto.split(',')[0]:''" mode="" v-if="item.shopfrontPhoto"></image>
				</view>
				<view class="info">
					<view class="title line2" v-if="!showMask">
						 {{ item.title }}丨<!-- {{ item.bvileAvea || 0 }}㎡ -->
					</view>
					<view class="title line2" v-if="showMask">
						一点点丨203家门店 丨 餐饮-奶茶店丨人均:￥56.5
					</view>
					<view class="gray-text" v-if="showMask">
						面积：100m²
					</view>
					<view class="acea-row type-list" v-if="notType">
						<view class="type-r" v-for="storeAdvantage in item.storeAdvantage?item.storeAdvantage.split('/'):[]" :key="storeAdvantage">
							{{ storeAdvantage }}
						</view>
					</view>
					<view class="acea-row type-list" v-if="notType">
						<view class="type-b" v-for="workingGroup in item.workingGroup?item.workingGroup.split('/'):[]" :key="workingGroup">
							{{ workingGroup }}
						</view>
					</view>
					<view class="acea-row row-middle row-between price-info">
						<view class="price">
							<text>{{ item.price || 0 }}</text>元
						</view>
						<view class="wants">
							2人想要
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'contactsList',
		props:{
			list:{
				type:Array,
				default:()=>{
					return []
				}
			},
			notType:{
				type:Boolean,
				default:()=>{
					return true
				}
			},
			showMask:{
				type:Boolean,
				default:()=>{
					return false
				}
			}
		},
		data(){
			return{
				
			}
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url:'/pages/details/merchantService/merchantService?id='+id
				})
			},
		}
	}
</script>

<style lang="scss">
	// 推荐
	.goods-list{
		padding: 30rpx 0;
		.item{
			width: 48%;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			margin-bottom: 24rpx;
			.img{
				width: 100%;
				height: 288rpx;
				border-radius: 20rpx 20rpx 0 0;
				background: #ff0000;
				image{
					width: 100%;
					height: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}
			}
			.info{
				padding: 18rpx;
				.title{
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: rgba(0, 0, 0, 1);
				}
				.gray-text{
					font-size: 26rpx;
					font-weight: 400;
					line-height: 42rpx;
					color: rgba(128, 128, 128, 1);
				}
				.type-list{
					padding: 12rpx 0;
				}
				.type-r{
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(238, 33, 45, 1);
					padding: 0 12rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					border-radius: 4rpx;
					background: rgba(255, 232, 234, 1);
					letter-spacing: 0.4rpx;
					margin-right: 14rpx;
					margin-bottom: 10rpx;
					white-space: nowrap;
				}
				.type-b{
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(82, 104, 139, 1);
					padding: 0 12rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					border-radius: 4rpx;
					background: rgba(248, 249, 253, 1);
					letter-spacing: 0.4rpx;
					margin-right: 14rpx;
					margin-bottom: 10rpx;
					white-space: nowrap;
				}
				
				.price-info{
					.price{
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
						text{
							font-size: 36rpx;
							font-weight: 700;
						}
					}
					.wants{
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(166, 166, 166, 1);
					}
				}
			}
		}
	}
</style>